import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router';
import { Cell } from 'zarm';
import s from './style.module.less'
import CustomIcon from '../CustomIcon';
import { typeMap } from '@/utils';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';

const BillItem = ({ bill }) => {
    const [income, setIncome] = useState(0);
    const [expense, setExpense] = useState(0);
    const history = useHistory();

    useEffect(() => {
        const _income = bill.bills.filter(i => i.pay_type === 2).reduce((curr, item) => {
            curr += (+item.amount)
            return curr;
        }, 0);
        const _expense = bill.bills.filter(i => i.pay_type === 1).reduce((curr, item) => {
            curr += (+item.amount);
            return curr;
        }, 0);
        setIncome(_income);
        setExpense(_expense);
    }, [bill.bills]);
    const goToDetail = item => {
        history.push(`/detail?id=${item.id}`)
    }
    return (
        <div className={s.item}>
            <div className={s.headerDate}>
                <div className={s.data}>{bill.date}</div>
                <div className={s.money}>
                    <span>
                        <img src="//s.yezgea02.com/1615953405599/zhi%402x.png" alt='支' />
                        <span>￥{expense.toFixed(2)}</span>
                    </span>
                    <span>
                        <img src="//s.yezgea02.com/1615953405599/shou%402x.png" alt='收' />
                        <span>￥{income.toFixed(2)}</span>
                    </span>
                </div>
            </div>
            {
                bill && bill.bills.map(item => <Cell
                    className={s.bill}
                    key={item.id}
                    onClick={() => goToDetail(item)}
                    title={
                        <>
                            <CustomIcon
                                className={s.itemIcon}
                                type={item.type_id ? typeMap[item.type_id].icon : 1}
                            />
                            <span>{item.type_name}</span>
                        </>
                    }
                    description={<span style={{ color: item.pay_type == 2 ? 'red' : '#39be77' }}>{`${item.pay_type == 1 ? '-' : '+'}${item.amount}`}</span>}
                    help={<div>{dayjs(new Date(item.date)).format('HH:mm')} {item.remark ? `| ${item.remark}` : ''}</div>}
                >
                </Cell>)
            }
        </div>
    )
}
BillItem.propTypes = {
    bill: PropTypes.object
};
export default BillItem;
